
<template>
  <div>
    <!--    data顶部搜索栏开始-->
    <div class="card" style = "margin-bottom:5px;  display: flex" >
      <el-input placeholder="名称搜索"  v-model="name" style = "width:240px; margin-right: 5px" :prefix-icon="Search" />
      <el-button type="primary" :icon="Search" circle @click="load"></el-button>
      <el-button type="warning">重置</el-button>
    </div>
    <!--    data顶部搜索栏结束-->

    <!--    data第二栏操作栏开始-->
    <div class="card" style = "margin-bottom: 5px;">
      <el-button type="primary" style = "margin-left: 5px" @click="handleAdd">新增</el-button>
      <el-button type="danger" style = "margin-left: 13px">批量删除</el-button>
<!--      <el-button type="info" style = "margin-left: 13px">导入</el-button>-->
<!--      <el-button type="success" style = "margin-left: 13px">导出</el-button>-->
    </div>

    <!--    data第二栏操作栏结束-->

    <!--    data中部数据表格栏开始-->
    <el-table
        :data="data.tableData"
        border
        style="width:100%"
        stripe
    >
      <el-table-column
          prop="id"
          label="编号"
      />
      <el-table-column
          prop="name"
          label="姓名"
      />
      <el-table-column
          prop="password"
          label="密码"
      />

    </el-table>
    <!--    data中部数据表格栏结束-->

    <!--    data底部分页组件开始-->
    <div class ="card" style="margin-top: 5px">
      <el-pagination
          @size-change="load"
          @current-change="load"
          :total = "data.total"
          v-model:current-page="data.pageNum"
          v-model:page-size="data.pageSize"
          :page-sizes="[ 5,10,15,20]"
          layout = "total, sizes, prev, pager, next, jumper"
          background
      />

    </div>
    <!--    data底部分页组件结束-->
    <el-dialog title="员工信息" v-model="data.formVisible" width="500" >
      <el-form :model="data.form" style="padding-right: 50px;padding-top: 20px">
        <el-form-item label="名称"  label-width="80px" >
          <el-input v-model="data.form.name" autocomplete="off" placeholder="请输入名称"/>
        </el-form-item>
        <el-form-item label="密码" label-width="80px">
          <el-input v-model="data.form.password" autocomplete="off" placeholder="请输入密码"/>
        </el-form-item>
      </el-form>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="data.formVisible = false">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
          </div>
        </template>

    </el-dialog>
  </div>


</template>

<script setup>
import {Search} from "@element-plus/icons-vue";
import {ref,reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const name = ref('');

const data = reactive({
  total:  20,
  pageNum :  1,
  pageSize : 10,
  tableData: [],
  formVisible: false,
  form:{
    name: '',
    password: '',
  }
})
const load = () => {
  request.get('admin/selectPage',{// ?pageNum=1&pageSize=10
    params:{
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      name: name.value,
    }
  }).then(res=>{
    data.tableData = res.data.list;
    data.total = res.data.total;
    console.log(res.data);
  })
}
load()
const handleAdd = () => {
  data.formVisible = true;
  data.form={};
}
const save = () => {
  request.post('admin/add',data.form).then(res=>{
    console.log(res)
      if(res.code === '200'){
        ElMessage.success('保存成功')
        load()
        data.formVisible = false;
      }else {
        ElMessage.error(res.msg)
      }
  })
}
</script>